<template>
  <div class="createPost-container">
    <table>
      <tr>
        <td>标题</td>
        <td>{{message.title}}</td>
      </tr>

      <tr>
        <td>类型</td>
        <td>{{message.type}}</td>
      </tr>

      <tr>
        <td>时间</td>
        <td>{{message.createTime}}</td>
      </tr>

      <tr>
        <td>内容</td>
        <td>{{message.content}}</td>
      </tr>
    </table>
    <div style="display: flex;justify-content: center">
      <el-button type="success" @click="readMsg(message.id)" v-if="message.status===false">设为已读</el-button>
      <el-button @click="goBack">返回</el-button>
    </div>
  </div>
</template>

<script>
  import Tinymce from '@/components/Tinymce'
  import Sticky from '@/components/Sticky' // 粘性header组件
  import {getMsg, readMsg} from '@/api/messageBox'


  export default {
    name: 'MessageDetail',
    components: {Tinymce, Sticky},
    data() {
      return {
        msgId: null,
        message: {}
      }
    },
    computed: {},
    created() {
      const id = this.$route.params && this.$route.params.id
      this.msgId = id;
      this.fetchData(id)

      // Why need to make a copy of this.$route here?
      // Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
      // https://github.com/PanJiaChen/vue-element-admin/issues/1221
      this.tempRoute = Object.assign({}, this.$route)
    },
    methods: {
      fetchData(id) {
        getMsg(id).then(r1 => {
          this.message = r1.data

          //设置tag标签和title
          this.setTagsViewTitle()
          this.setPageTitle()
        }).catch(err => {
          console.log(err)
        })
      },
      setTagsViewTitle() {
        const title = '查看消息'
        const route = Object.assign({}, this.tempRoute, {title: `${title}-${this.msgId}`})
        this.$store.dispatch('tagsView/updateVisitedView', route)
      },
      setPageTitle() {
        const title = '查看消息'
        document.title = `${title} - ${this.msgId}`
      },

      //设置已读
      readMsg(id) {
        readMsg(id).then(r1 => {
          this.message.status = true
          this.$message({
            type: 'success',
            message: '设置成功'
          })
        })
      },


      //关闭标签并返回列表页
      goBack() {
        this.$store.dispatch('tagsView/delView', this.$route).then(() => {
          this.$nextTick(() => {
            this.$router.replace({
              path: '/messageBox/list'
            })
          })
        })
      }


    }
  }
</script>

<style lang="scss" scoped>
  @import "~@/styles/mixin.scss";

  .createPost-container {
    position: relative;

    .createPost-main-container {
      padding: 40px 45px 20px 50px;

      .postInfo-container {
        position: relative;
        @include clearfix;
        margin-bottom: 10px;

        .postInfo-container-item {
          float: left;
        }
      }
    }

    .word-counter {
      width: 40px;
      position: absolute;
      right: 10px;
      top: 0px;
    }
  }

  .news-textarea /deep/ {
    textarea {
      padding-right: 40px;
      resize: none;
      border: none;
      border-radius: 0px;
      border-bottom: 1px solid #bfcbd9;
    }
  }

  /*图片*/
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    border: 1px solid #d9d9d9;
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    border: 1px solid #d9d9d9;
    width: 178px;
    height: 178px;
    display: block;
  }

  .tag {
    margin-left: 5px;
  }
</style>

